<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面未找到 - 404错误</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #858796;
            --success-color: #1cc88a;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
            --light-color: #f8f9fc;
            --dark-color: #5a5c69;
        }
        
        body {
            background-color: #f8f9fc;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            height: 100vh;
            display: flex;
            align-items: center;
        }
        
        .error-container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding: 2rem;
        }
        
        .error-code {
            font-size: 7rem;
            font-weight: 900;
            color: var(--dark-color);
            line-height: 1;
            margin-bottom: 1rem;
            text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
        }
        
        .error-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark-color);
            margin-bottom: 1rem;
        }
        
        .error-description {
            font-size: 1.1rem;
            color: var(--secondary-color);
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .error-actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }
        
        .btn-custom {
            padding: 0.75rem 1.5rem;
            border-radius: 0.35rem;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .error-search {
            max-width: 400px;
            margin: 0 auto 2rem;
        }
        
        .error-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .error-links a {
            color: var(--secondary-color);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .error-links a:hover {
            color: var(--primary-color);
        }
        
        .error-illustration {
            max-width: 300px;
            margin: 2rem auto;
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            .error-code {
                font-size: 5rem;
            }
            
            .error-actions {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-custom {
                width: 100%;
                max-width: 250px;
            }
        }
        
        /* 动画效果 */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .floating {
            animation: float 5s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="error-container">
            <div class="error-code floating">404</div>
            <h1 class="error-title">页面未找到</h1>
            <p class="error-description">
                抱歉，您正在寻找的页面不存在。<br>
                可能已被移动、删除，或者您输入了错误的URL。
            </p>
            
            <!-- 搜索框 -->
            <div class="error-search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索您需要的内容...">
                    <button class="btn btn-primary" type="button">搜索</button>
                </div>
            </div>
            
            <!-- 主要操作按钮 -->
            <div class="error-actions">
                <a href="{{ url_for('index') }}" class="btn btn-primary btn-custom">返回首页</a>
                <a href="{{ url_for('index') }}" class="btn btn-outline-primary btn-custom">返回上一页</a>
                <a href="{{ url_for('index') }}" class="btn btn-outline-primary btn-custom">联系支持</a>
            </div>
            
            <!-- 错误插图 -->
            <div class="error-illustration">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#4e73df" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.6,90,-16.3,89.9,-0.1C89.8,16.2,86.9,32.4,80.1,46.4C73.3,60.4,62.6,72.2,49.2,80.1C35.8,88,19.9,92,2.9,88.3C-14.2,84.6,-28.3,73.3,-41.3,63.5C-54.3,53.7,-66.1,45.5,-74.4,34.3C-82.7,23.1,-87.5,8.9,-87.1,-5.4C-86.7,-19.7,-81.1,-34.1,-71.4,-45.8C-61.7,-57.5,-47.9,-66.6,-33.2,-73.5C-18.5,-80.4,-2.9,-85.2,11.5,-83.5C25.9,-81.8,30.6,-83.6,44.7,-76.4Z" transform="translate(100 100)" />
                </svg>
            </div>
            
            <!-- 有用的链接 -->
            <div class="error-links">
                <a href="#">网站地图</a>
                <a href="#">帮助中心</a>
                <a href="#">隐私政策</a>
                <a href="#">使用条款</a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 添加简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            const errorCode = document.querySelector('.error-code');
            
            // 点击404数字时的动画效果
            errorCode.addEventListener('click', function() {
                this.style.transform = 'scale(1.1)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 300);
            });
            
            // 搜索功能（简单实现）
            const searchButton = document.querySelector('.error-search button');
            const searchInput = document.querySelector('.error-search input');
            
            searchButton.addEventListener('click', function() {
                if (searchInput.value.trim() !== '') {
                    alert('正在搜索: ' + searchInput.value);
                    // 在实际应用中，这里应该执行搜索操作
                } else {
                    searchInput.focus();
                }
            });
            
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchButton.click();
                }
            });
        });
    </script>
</body>
</html>